<template>
  <div class="page">
    <div class="pattern-center">
      <div class="pattern-attachment-img">
        <img src="https://cdn.ryanc.cc/img/blog/thumbnails/bd603f0a8e74c69c9c227e0d2eec4394.jpeg" class="lazyload">
      </div>
      <header class="pattern-header">
        <h1 class="entry-title">文章归档</h1>
      </header>
    </div>
    <scroll>
      <div id="content" class="site-content">
        <article class="post-item">
          <div id="archives-temp">
            <div id="archives-content" class="app">
              <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item v-for="(item,index) in timeList" :name="index" class="ccll archive-title" :id="item.id" :key="index">
                  <template slot="title">
                      <span class="ar-time">
                        <i class="iconfont icon-log-manager"></i>
                      </span>
                    <h3>{{ item.time}}</h3>
                  </template>
                  <div class="archives" :data-date="item.time">

                    <div class="brick" v-for="(child,index) in item.childList" :key="child">
                      <span class="ar-circle"></span>
                      <div class="arrow-left-ar"></div>
                      <a :href="child.url">
                        <span class="time"><i class="iconfont iconicon-time"></i>{{ child.time }}</span>{{ child.content }}
                      </a>
                    </div>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>

          </div>
        </article>
      </div>
    </scroll>
  </div>
</template>

<script>
import scroll from "@/components/scroll/scroll";

export default {
  name: 'archives', components: {
    scroll
  },
  data() {
    return {
      timeList:[
        {
          id:'arti-2020-3',
          time:'2020-3',
          childList:[
            {
              time:'09-24',
              content:'德馨666',
              url:'https://ryanc.cc/archives/textbook-style-questioning.html'
            },
            {
              time:'09-24',
              content:'德馨666',
              url:'https://ryanc.cc/archives/textbook-style-questioning.html'

            },{
              time:'09-24',
              content:'德馨666',
              url:'https://ryanc.cc/archives/textbook-style-questioning.html'
            },
            {
              time:'09-24',
              content:'德馨666',
              url:'https://ryanc.cc/archives/textbook-style-questioning.html'
            },
            {
              time:'09-24',
              content:'德馨666',
              url:'https://ryanc.cc/archives/textbook-style-questioning.html'
            },
            {
              time:'09-24',
              content:'德馨666',
              url:'https://ryanc.cc/archives/textbook-style-questioning.html'
            },
            {
              time:'09-24',
              content:'德馨666',
              url:'https://ryanc.cc/archives/textbook-style-questioning.html'
            },
            {
              time:'09-24',
              content:'德馨666',
              url:'https://ryanc.cc/archives/textbook-style-questioning.html'
            }
          ]
        },
        {
          id:'arti-2020-4',
          time:'2020-4',
          childList:[
            {
              time:'09-24',
              content:'德馨666'
            },
            {
              time:'09-24',
              content:'德馨666'
            },{
              time:'09-24',
              content:'德馨666'
            },
            {
              time:'09-24',
              content:'德馨666'
            },
            {
              time:'09-24',
              content:'德馨666'
            },
            {
              time:'09-24',
              content:'德馨666'
            },
            {
              time:'09-24',
              content:'德馨666'
            },
            {
              time:'09-24',
              content:'德馨666'
            }
          ]
        },
        {
          id:'arti-2020-5',
          time:'2020-5',
          childList:[
            {
              time:'09-24',
              content:'德馨666'
            },
            {
              time:'09-24',
              content:'德馨666'
            },{
              time:'09-24',
              content:'德馨666'
            },
            {
              time:'09-24',
              content:'德馨666'
            },
            {
              time:'09-24',
              content:'德馨666'
            },
            {
              time:'09-24',
              content:'德馨666'
            },
            {
              time:'09-24',
              content:'德馨666'
            },
            {
              time:'09-24',
              content:'德馨666'
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleChange(val) {
      console.log(val);
    }
  }
}

</script>

<style scoped lang="scss">
.pattern-center {
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  overflow: hidden;

  header {
    display: block;
  }

  .pattern-attachment-img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-origin: border-box;
    width: 100%;
    height: 400px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
      border: 0;
    }

    .lazyload {
      filter: blur(0);
      transition: .3s filter linear, .3s -webkit-filter linear;
    }
  }

  .pattern-header {
    position: absolute;
    top: 200px;
    left: 0px;
    right: 0px;
    text-align: center;
    color: #fff;
    text-shadow: 2px 2px 10px #000;
    z-index: 1;

    .entry-title {
      color: #fff;
      font-size: 40px;
      font-weight: 500;
      width: 80%;
      margin: auto;
      padding: 0px;
      border: 0px;
    }
  }
}

#content {
  animation: main 1s;
}

.site-content {
  article {
    display: block;
  }

  #archives-temp {
    margin-top: 50px;
    margin-bottom: 100px;

    #archives-content {
      position: relative;
      //border-left: 1px dashed #f5f5f5;

      .archive-title {
        .ar-time {
          position: relative;

          i {
            padding: 8px;
            border-radius: 100px;
            background: orange;
            color: #fff;
            margin-right: 10px;
          }
        }

        .h3 {
          color: orange;
        }

        .archives {
          span.ar-circle {
            height: 10px;
            width: 10px;
            background: orange;
            display: inline-block;
            position: absolute;
            left: 12px;
            margin-top: 22px;
            border-radius: 100px;
          }

          .arrow-left-ar {
            position: relative;
            left: -15px;
            width: 0px;
            height: 0px;
            display: block;
            float: left;
            margin-top: 10px;
            border-left: 15px solid transparent;
            border-bottom: 20px solid #f5f5f5;
          }

          .brick {
            margin-left: 38px;
            margin-right: 10px;

            a {
              color: #7d7d7d;
              padding: 18px;
              background: #f5f5f5;
              margin-bottom: 20px;
              display: block;
              letter-spacing: 0;

              span.time {
                float: right;
                color: #cacaca;

                i {
                  margin: 3px;
                }
              }
            }
          }
        }

        ::v-deep .el-collapse-item__header {
          position: relative;
          top: 0px;
          color: orange;
          width: 100%;
          font-size: 20px;
          padding : 30px 0 ;
        }

        ::v-deep .el-collapse {
          border-bottom: none;

        }
      }

    }
  }
}


</style>